import React from "react";
import { Card, Table, Modal, Button, message, Badge } from "antd";
import axios from "@/axios/index";
import Utils from "../../utils/utils";

export default class highTable extends React.Component {
  constructor() {
    super();
    this.state = {
      dataSource2: []
    };
  }

  params = {
    page: 1
  };
  componentDidMount() {
    //初始化调用mock数据
    this.request();
  }

  //动态获取mock数据
  request = () => {
    let _this = this;
    axios
      .ajax({
        url: "/table/high/list",
        data: {
          params: {
            page: this.params.page
          }
        }
      })
      .then(res => {
        if (res.code == "0") {
          //解决报错没有key
          res.result.list.map((item, index) => {
            item.key = index;
          });
          this.setState({
            dataSource: res.result.list
          });
        }
      });
  };

  //排序触发onChange方法
  handleChange = (pagination, filters, sorter) => {
    this.setState({
      //官方APi把排序的值存进去
      sortOrder: sorter.order
    });
  };

  //表格删除
  handleDelete = () => {
    Modal.confirm({
      title: "确认",
      content: "确定要删除行么?",
      onOk: () => {
        message.success("删除成功");
        this.request();
      }
    });
  };

  render() {
    // 表头
    const columns = [
      {
        title: "ID",
        dataIndex: "id",
        width: 80
      },
      {
        title: "用户名",
        dataIndex: "username",
        width: 80
      },
      {
        title: "性别",
        dataIndex: "sex",
        width: 80,
        render(sex) {
          return sex == 1 ? "男" : "女";
        }
      },
      {
        title: "状态",
        width: 80,
        dataIndex: "state",
        render(state) {
          let config = {
            "1": "在职",
            "2": "离职",
            "3": "待业",
            "4": "没上过班"
          };
          return config[state];
        }
      },
      {
        title: "爱好",
        width: 80,
        dataIndex: "interest",
        render(interest) {
          let config = {
            "1": "踢球",
            "2": "篮球",
            "3": "羽毛球",
            "4": "溜溜球"
          };
          return config[interest];
        }
      },
      {
        title: "生日",
        width: 120,
        dataIndex: "birthday"
      },
      {
        title: "地址",
        width: 120,
        dataIndex: "address"
      },
      {
        title: "早起时间",
        width: 120,
        dataIndex: "time"
      }
    ];

    const columns2 = [
      {
        title: "ID",
        dataIndex: "id",
        width: 80,
        fixed: "left"
      },
      {
        title: "用户名",
        dataIndex: "username",
        width: 80,
        fixed: "left"
      },
      {
        title: "性别",
        dataIndex: "sex",
        width: 80,
        render(sex) {
          return sex == 1 ? "男" : "女";
        }
      },
      {
        title: "状态",
        width: 80,
        dataIndex: "state",
        render(state) {
          let config = {
            "1": "在职",
            "2": "离职",
            "3": "待业",
            "4": "没上过班"
          };
          return config[state];
        }
      },
      {
        title: "爱好",
        width: 80,
        dataIndex: "interest",
        render(interest) {
          let config = {
            "1": "踢球",
            "2": "篮球",
            "3": "羽毛球",
            "4": "溜溜球"
          };
          return config[interest];
        }
      },
      {
        title: "生日",
        width: 120,
        dataIndex: "birthday"
      },
      {
        title: "生日",
        width: 120,
        dataIndex: "birthday"
      },
      {
        title: "生日",
        width: 120,
        dataIndex: "birthday"
      },
      {
        title: "生日",
        width: 120,
        dataIndex: "birthday"
      },
      {
        title: "生日",
        width: 120,
        dataIndex: "birthday"
      },
      {
        title: "生日",
        width: 120,
        dataIndex: "birthday"
      },
      {
        title: "生日",
        width: 120,
        dataIndex: "birthday"
      },
      {
        title: "地址",
        width: 120,
        dataIndex: "address"
      },
      {
        title: "早起时间",
        width: 120,
        dataIndex: "time"
      }
    ];

    const columns3 = [
      {
        title: "ID",
        dataIndex: "id"
      },
      {
        title: "用户名",
        dataIndex: "username"
      },
      {
        title: "性别",
        dataIndex: "sex",
        render(sex) {
          return sex == 1 ? "男" : "女";
        }
      },
      {
        title: "年龄",
        dataIndex: "age",
        //在需要排序的列 定义sorter sortOrder
        sorter: (a, b) => {
          return a.age - b.age;
        },
        sorterOrder: this.state.sortOrder //排序的顺序
      },
      {
        title: "状态",
        dataIndex: "state",
        render(state) {
          let config = {
            "1": "在职",
            "2": "离职",
            "3": "待业",
            "4": "没上过班"
          };
          return config[state];
        }
      },
      {
        title: "爱好",
        dataIndex: "interest",
        render(interest) {
          let config = {
            "1": "踢球",
            "2": "篮球",
            "3": "羽毛球",
            "4": "溜溜球"
          };
          return config[interest];
        }
      },
      {
        title: "生日",
        dataIndex: "birthday"
      },
      {
        title: "地址",
        dataIndex: "address"
      },
      {
        title: "早起时间",
        dataIndex: "time"
      }
    ];

    const columns4 = [
      {
        title: "ID",
        dataIndex: "id"
      },
      {
        title: "用户名",
        dataIndex: "username"
      },
      {
        title: "性别",
        dataIndex: "sex",
        render(sex) {
          return sex == 1 ? "男" : "女";
        }
      },
      {
        title: "状态",
        dataIndex: "state",
        render(state) {
          let config = {
            "1": <Badge status="success" text="成功" />,
            "2": <Badge status="error" text="报错" />,
            "3": <Badge status="default" text="正常" />,
            "4": <Badge status="warning" text="警告" />,
            "5": <Badge status="porcessing" text="进行中" />
          };
          return config[state];
        }
      },
      {
        title: "爱好",
        dataIndex: "interest",
        render(interest) {
          let config = {
            "1": "踢球",
            "2": "篮球",
            "3": "羽毛球",
            "4": "溜溜球"
          };
          return config[interest];
        }
      },
      {
        title: "生日",
        dataIndex: "birthday"
      },
      {
        title: "地址",
        dataIndex: "address"
      },
      {
        title: "早起时间",
        dataIndex: "time"
      },
      {
        title: "删除",
        //尽量写成箭头函数 ,不然this容易错误
        render: (text, item) => {
          return (
            <Button
              onClick={item => {
                this.handleDelete(item);
              }}
            >
              删除
            </Button>
          );
        }
      }
    ];

    return (
      <div>
        <Card title="头部固定">
          <Table
            bordered
            columns={columns}
            dataSource={this.state.dataSource}
            pagination={false}
            //固定表格高度,可以固定头部 , 头部宽度要手动设定width
            scroll={{ y: 240 }}
          />
        </Card>

        <Card title="左侧列固定">
          <Table
            bordered
            columns={columns2}
            dataSource={this.state.dataSource}
            pagination={false}
            scroll={{ x: 1500 }}
          />
        </Card>

        <Card title="列表排序">
          <Table
            bordered
            columns={columns3}
            dataSource={this.state.dataSource}
            pagination={false}
            onChange={this.handleChange}
          />
        </Card>

        <Card title="操作按钮">
          <Table
            bordered
            columns={columns4}
            dataSource={this.state.dataSource}
            pagination={false}
          />
        </Card>
      </div>
    );
  }
}
